<section class="header">
  <h1>
    {{#if isEdit}}
      {{t 'clustersPage.editClusterName' name=originalCluster.displayName}}
    {{else if (eq step 1)}}
      {{t 'clustersPage.newCluster'}}
    {{else}}
      {{t 'clustersPage.newClusterName' name=cluster.displayName}}
    {{/if}}
  </h1>
</section>

{{#unless initialProvider}}

  <div class="row nav nav-boxes checked-active inline-form">
    <div class="col span-8 col-inline mb-0">
      <div>
        <label class="acc-label">{{t 'clusterNew.driverLabels.cloud'}}</label>
      </div>
      {{#each (get providerGroups "cloudGroup") as |choice|}}
        {{#unless choice.scriptError}}
          {{#link-to (query-params provider=choice.name) class=(concat "mb-20 mt-10 col span-3 col-inline nav-box-item driver " choice.name)}}
            <div class="machine-driver {{if choice.genericIcon 'generic'}} {{choice.name}}"></div>
            <p class="driver-name">{{driver-name choice.name}}</p>
          {{/link-to}}
        {{else}}
          <div class={{concat "disabled error-loading-driver mb-20 mt-10 col span-3 col-inline nav-box-item driver " choice.name}}>
              {{#tooltip-element type="tooltip-basic" model=choice.scriptError tooltipTemplate='tooltip-static' aria-describedby="tooltip-base" tooltipFor="tooltipDriverError"}}
                <span class="icon icon-alert"></span>
              {{/tooltip-element}}
            <div class="machine-driver {{choice.name}}"></div>
            <p class="driver-name">{{driver-name choice.name}}</p>
          </div>
        {{/unless}}
      {{else}}
        <div class="machine-driver-empty">{{t 'clusterNew.driverLabels.noCloud'}}</div>
      {{/each}}
    </div>

    <div class="col span-2 col-inline mb-0">
      <div>
        <label class="acc-label">{{t 'clusterNew.driverLabels.import'}}</label>
      </div>
      {{#each (get providerGroups "importGroup") as |choice|}}
        {{#link-to (query-params provider=choice.name) class=(concat "mb-20 mt-10 col span-12 col-inline nav-box-item driver " choice.name)}}
          <div class="machine-driver {{choice.name}}"></div>
          <p class="driver-name">{{driver-name choice.name}}</p>
          {{#if choice.genericIcon}}
            <p class="text-link text-bold">{{driver-name choice.name}}</p>
          {{/if}}
        {{/link-to}}
      {{/each}}
    </div>

  </div>

  <div class="row nav nav-boxes checked-active inline-form">
    <div class="col span-8 col-inline mt-0">
      <div>
        <label class="acc-label">{{t 'clusterNew.driverLabels.infra'}}</label>
      </div>
      {{#each (get providerGroups "rkeGroup") as |choice|}}
        {{#link-to (query-params provider=choice.name) class=(concat "mb-20 mt-10 col span-3 col-inline nav-box-item driver " choice.name)}}
          <div class="machine-driver {{if choice.genericIcon 'generic'}} {{choice.name}}"></div>
          <p class="driver-name">{{driver-name choice.name}}</p>
        {{/link-to}}
      {{else}}
        <div class="machine-driver-empty">{{t 'clusterNew.driverLabels.noInfra'}}</div>
      {{/each}}
    </div>

    <div class="col span-2 col-inline mt-0">
      <div>
        <label class="acc-label">{{t 'clusterNew.driverLabels.custom'}}</label>
      </div>
      {{#each (get providerGroups "customGroup") as |choice|}}
        {{#link-to (query-params provider=choice.name) class=(concat "mb-20 mt-10 col span-12 col-inline nav-box-item driver " choice.name)}}
          <div class="machine-driver {{choice.name}}"></div>
          <p class="driver-name">{{driver-name choice.name}}</p>
          {{#if choice.genericIcon}}
            <p class="text-link text-bold">{{driver-name choice.name}}</p>
          {{/if}}
        {{/link-to}}
      {{/each}}
    </div>
  </div>
{{/unless}}


{{#if (eq driverInfo.name "amazoneks")}}
  {{#banner-message color='bg-warning'}}
    <p>{{t 'clusterNew.amazoneks.ingressWarning'}}</p>
  {{/banner-message}}
{{else if (eq driverInfo.name "azureaks")}}
  {{#banner-message color='bg-warning'}}
    <p>{{t 'clusterNew.azureaks.ingressWarning'}}</p>
  {{/banner-message}}
{{/if}}

{{#if (eq step 1)}}
  <form onsubmit={{action "clickNext"}}>
    <div class="row">
      {{form-name-description
          model=model.cluster
          nameRequired=true
          nameLabel='clusterNew.name.label'
          namePlaceholder='clusterNew.name.placeholder'
          descriptionPlaceholder='clusterNew.description.placeholder'
      }}
    </div>

    {{#accordion-list showExpandAll=false as |al expandFn|}}
      {{#accordion-list-item
           title=(t 'clusterNew.members.label')
           detail=(t 'clusterNew.members.detail')
           expandAll=al.expandAll
           everExpanded=true
           expanded=expanded
           expand=(action expandFn)
      }}
        {{#if model.cluster.internal}}
          {{banner-message icon='icon-alert' color='bg-error mt-0 mb-10' message=(t 'clusterPage.internal' appName=settings.appName htmlSafe=true)}}
        {{/if}}

        {{#if isEdit}}
          {{banner-message icon='icon-info' color='bg-info mt-0 mb-10' message=(t 'clusterPage.removeMemberNote')}}
        {{/if}}

        {{form-members
            creator=model.me
            editing=notView
            expanded=expanded
            isNew=newCluster
            memberConfig=memberConfig
            errors=memberErrors
            primaryResource=cluster
            registerHook=(action "registerHook")
            roles=model.roleTemplates
            type="cluster"
            users=model.users
        }}
      {{/accordion-list-item}}
    {{/accordion-list}}
  </form>
{{/if}}

{{component driverInfo.driverComponent
    mode=mode
    nodeWhich=driverInfo.nodeWhich
    model=model
    originalCluster=originalCluster
    otherErrors=memberErrors
    clusterErrors=errors
    save=(action 'save')
    close=(action 'close')
    registerHook=(action "registerHook")
}}

{{#if (and isEdit (not provider))}}
  {{top-errors errors=errors}}
  {{save-cancel editing=true save="save" cancel="close"}}
{{/if}}
